<script setup lang="ts">
  import HistoryList from './components/HistoryList.vue'
  import Default from './components/Default.vue'
  import Sender from './components/Sender.vue'
  import Dialog from './components/Dialog.vue'
  import { AGENTS } from './utils/constant'
  import { computed, nextTick, ref } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const curAgent = ref(AGENTS[0].icon)
  const handleClickAgent = async (icon: string) => {
    curAgent.value = icon
    if (icon === 'icon-work') {
      await router.push('/homeBuild')
    }
  }

  const dialogStyle = computed(() => {
    return {
      height: `calc(100% - ${senderRef.value?.height + 20}px)`,
    }
  })
  const showDefault = ref(true)
  const senderRef = ref()
  const dialogRef = ref()
  const handleSend = async (message: string, fileList: any[]) => {
    showDefault.value = false
    await nextTick(() => {
      if (dialogRef.value) dialogRef.value.handleSend(message, fileList)
    })
  }

  const isSending = computed(() => {
    return dialogRef.value?.isSending ?? false
  })

  const newDialogId = ref('')
  const handleCreateDialog = (id: string) => {
    newDialogId.value = id
    showDefault.value = true
    senderRef.value?.handleClear(id)
  }

  const handleClickItem = async (item: any) => {
    showDefault.value = false
    await nextTick(() => {
      dialogRef.value?.getHistory(item)
    })
  }

  const historyListRef = ref()
  const newDialog = (obj: any) => {
    historyListRef.value?.createNewDialog(obj)
  }

  const handleRename = (item: any) => {
    dialogRef.value?.rename(item)
  }

  const handleDeleteItem = () => {
    senderRef.value?.handleClear()
    showDefault.value = true
  }
</script>

<template>
  <div class="h-full flex gap-4 transition-all duration-300 py-5 pingfang">
    <!-- 左侧历史记录 -->
    <history-list
      @rename="handleRename"
      @clickItem="handleClickItem"
      ref="historyListRef"
      :isSending="isSending"
      @createDialog="handleCreateDialog"
      @deleteItem="handleDeleteItem"
    />

    <!-- 右侧内容 -->
    <div class="flex-1">
      <div class="h-full bg-white rounded-lg px-4 pb-4">
        <default v-if="showDefault" class="pt-[180px]" @clickAgent="handleClickAgent" />
        <div v-else :style="dialogStyle">
          <Dialog :newConversationId="newDialogId" @createDialog="newDialog" ref="dialogRef" />
        </div>
        <sender
          @send="handleSend"
          ref="senderRef"
          :curAgent="curAgent"
          :isDefault="showDefault"
          :isSending="isSending"
        />
      </div>
    </div>
  </div>
</template>
